<template>
	<view>
		<u-navbar title="选择新增" class="navHeader noFixed" :is-back="false" title-size="36" title-color="#333333"></u-navbar>
		
		<view class="container">
			<view class="item" @click="onGo(1)">
				<image src="../static/qiwen.png" mode=""></image>
				<text class="text">录入气温</text>
			</view>
			<view class="item" @click="onGo(2)">
				<image src="../static/tongji.png" smode=""></image>
				<text class="text">统计需冷量</text>
			</view>
		</view>
		<u-tabbar :list="tabbar" :mid-button="true" mid-button-size="308" icon-size="48" :border-top="false"></u-tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import UserLogin from '@/common/js/login.js'
import storage from '@/common/js/storage';
export default {
	mixins: [UserLogin],
	data() {
		return {
			loginStatus: true
		}
	},
	computed: {
		...mapState(['tabbar'])
	},
	async onShow() {
		await this.__init()
	},
	methods: {
		async __init() {
			await this.$u.get('/public/lipingggu/queryLipingguTemperatureRecordRList').then((data) => {
				if(data.status == -1) { return }
				if(data.status === 2000) {
					storage.clear()
					this.$store.commit('clearUserInfo')
					this.loginStatus = false
				} else {
					this.loginStatus = true
				}
			});
		},
		showLogin() {
			let _this = this
			uni.showModal({
				title: '登录提示',
				content: '请确认是否授权登录账号？',
				cancelText: '暂不登录',
				cancelColor: '#333333',
				confirmText: '立即登录',
				confirmColor: '#00A1F2',
				success(res) {
					if(res.confirm) {
						_this.getUserInfo(_this.__init)
					} else {
						_this.loginStatus = false
					}
				}
			})
		},
		onGo(type) {
			if(!this.loginStatus) {
				this.showLogin()
				return
			}
			if(type == 1) {
				this.$u.route('/pages/subPage/input')
			} else if(type == 2) {
				this.$u.route('/pages/subPage/statistics')
			}
		}
	}
}
</script>

<style lang="less" scoped>
/deep/.u-tabbar__content__item__button {
	top: 6rpx !important;
}
.container {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 654rpx;
	height: 240rpx;
	background: #333333;
	opacity: 0.8;
	border-radius: 16rpx;
	position: absolute;
	bottom: 320rpx;
	left: 47rpx;
	&::after {
		content: ' ';
		width: 48rpx;
		height: 48rpx;
		background: #333333;
		position: absolute;
		bottom: -24rpx;
		left: 303rpx;
		transform: rotate(225deg);
	}
	.item {
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		.text {
			padding-top: 16rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	image {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}
}
</style>
